<template>
  <el-row :gutter="20">
    <!-- 使用循环遍历每篇日记 -->
    <el-col :span="8" v-for="diary in diaries" :key="diary.id">
      <el-card class="diary-card">
        <h3>{{ diary.title }}</h3>
        <p>{{ diary.content }}</p>

        <!-- 展示附加信息 -->
        <div class="diary-meta">
          <el-tag>{{ diary.date }}</el-tag>
          <el-tag type="primary">{{ diary.weather }}</el-tag>
          <el-tag type="success">{{ diary.mood }}</el-tag>
        </div>

        <!-- 编辑与删除操作按钮 -->
        <div class="diary-actions" style="margin-top: 10px;">
          <el-button size="small" type="info" @click="editDiary(diary)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteDiary(diary.id)">删除</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 模拟日记数据，包括天气和心情信息
const diaries = ref([
  { id: 1, title: '第一篇日记', content: '今天是个好日子，心情很好。', date: '2024-10-01', weather: '晴', mood: '开心' },
  { id: 2, title: '第二篇日记', content: '忙碌的一天，完成了很多任务。', date: '2024-10-02', weather: '多云', mood: '疲惫' },
  { id: 3, title: '第三篇日记', content: '遇到了一些挑战，但我克服了它们。', date: '2024-10-03', weather: '雨', mood: '沮丧' },
]);

// 创建 router 实例
const router = useRouter();

// 编辑日记的函数
const editDiary = (diary) => {
  // 使用 Vue Router 跳转到编辑页面，并传递日记数据
  router.push({ name: 'EditDiaryPage', params: { diaryId: diary.id } });
};

// 删除日记的函数
const deleteDiary = (id) => {
  // 删除操作逻辑，例如从数组中移除
  diaries.value = diaries.value.filter(diary => diary.id !== id);
  // 可以在删除后弹出提示
  ElMessage.success('删除成功');
};
</script>

<style scoped>
.diary-card {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.diary-meta {
  margin-top: 10px;
}

.diary-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.el-tag {
  margin-right: 5px;
}
</style>
